<template>
	<view class="box bg_f2">
		<view class="hidden" v-if="is_load">
			<view class="font_35 text_bold title" style="display: flex; align-items: center; justify-content: space-between;">
        {{detail_info.status_text}}
        <view v-if="detail_info.renew_deposit === 1" style="font-size: 28rpx; font-weight: normal; color: #FF6A00;">续存</view>
      </view>
      <view class="wrapper bg_fff">
        <swiper class="swiper" autoplay circular indicator-dots indicator-active-color="#FF6A00" v-if="isShow_img" style="height: 400rpx; width: 100%;" @click="previewImg()">
        	<swiper-item v-for="(item, index) in detail_info.store.image_text" :key="index">
        		<image :src="item" style="width: 100%; height: 400rpx;" mode="aspectFit"></image>
        	</swiper-item>
        </swiper>
      </view>
			<view class="wrapper bg_fff">
				<view class="list_circle_left"></view>
				<view class="list_circle_right"></view>
				<view class="van-ellipsis bg_fa font_35 text_bold list_top">{{detail_info.store.store_name}}</view>
        <view class=" bg_fff content font_28 color_7b hidden">
          <view class="flex1 list">
          	<view class="label">营业时间：</view>
          	<view class="w_flex1">{{detail_info.store.business_hours}}</view>
          </view>
          <view class="flex1 list" style="padding: 4px 0;">
          	<view class="label">联系方式：</view>
          	<view class="w_flex1">{{detail_info.store.mobile}}</view>
          	<view class="wrapper_right font_23 color_7b" @click="get_phones">拨号</view>
          </view>
          <view class="flex1 list">
          	<view class="label">地<text style="color: #fff;">空空</text>址：</view>
          	<view class="w_flex1">{{detail_info.store.address}}</view>
          	<view class="wrapper_right font_23 color_7b" @click="get_map">导航</view>
          </view>
          <view class="font_27 color_ff6a00 mabt" v-if="detail_info.status == 3">提示：订单已经完成无法查看地址电话。</view>
          <view class="font_27 color_ff6a00 mabt" v-else-if="detail_info.store.mobile == '********'">提示：电话和地址在寄存当天可见。</view>
          <view v-else>
          	<view class="font_27 color_ff6a00 mabt" v-if="detail_info.status == 1">提示：点击导航规划路线。</view>
          </view>
        </view>
        
			</view>
      <view class="quj-boxs" v-if="detail_info.status === 2">
        <view class="tip" v-if="tip">取件后，点击按钮结束订单避免超时，产生额外费用!<view class="close" @click="tip = false"></view></view>
        <view class="wrapper active bg_fff">
          <view class="list_circle_left"></view>
          <view class="list_circle_right"></view>
          <view class="van-ellipsis bg_fa font_35 text_bold list_top">取件凭证</view>
          <view class="quj-box bg_fff content font_28 color_7b hidden">
            <v-upload :list="qjList" v-if="qjList.length > 0"></v-upload>
            
            <view class="top" v-if="qjConfirmShow"><view class="btn" @click="qjconfirm()">解锁凭证 取回行李</view></view>
          </view>
        </view>
      </view>
      
			<view class="wrapper active">
				<view class="list_circle_left"></view>
				<view class="list_circle_right"></view>
				<view class="van-ellipsis bg_fa font_35 text_bold list_top" v-if="detail_info.status == 1">寄存码：{{detail_info.check_code}}</view>
				<view class="van-ellipsis bg_fa font_35 text_bold list_top" v-if="detail_info.status == 2 || detail_info.status == 4">取件码：{{detail_info.collect_code}}</view>
				<view class="van-ellipsis bg_fa font_35 text_bold list_top" v-if="detail_info.status == 0 || detail_info.status == 3">寄存信息</view>
				<view class="bg_fff content font_28 color_7b hidden">
          <view class="flex1 list">
          	<view class="label">订单编号：</view>
          	<view class="w_flex1">{{detail_info.order_no}}</view>
            <view class="wrapper_right" @click="copy(detail_info.order_no)">复制</view>
          </view>
          <view class="flex1 list" v-if="detail_info.original_order_no">
          	<view class="label">原订单号：</view>
          	<view class="w_flex1">{{detail_info.original_order_no}}</view>
          </view>
          
					<view class="flex1 list">
						<view class="label">寄存日期：</view>
						<view class="w_flex1">{{detail_info.start_time}}~{{detail_info.end_time}}</view>
					</view>
          <view class="flex1 list">
          	<view class="label flex1">行李信息：</view>
          	<view class="w_flex1" style="display: flex; align-items: center;">
              <template v-if="detail_info.trunk_number">
                <view>行李箱 x {{detail_info.trunk_number}}件</view>
                <view style="width: 30rpx;"></view>
              </template>
              <view v-if="detail_info.packsack_number">背包 x {{detail_info.packsack_number}}件</view>
            </view>
          </view>
          <view v-show = "orderMore">
            
            <view class="flex1 list">
            	<view class="label">订单状态：</view>
            	<view class="w_flex1">{{detail_info.status_text}}</view>
            </view>
            <view class="flex1 list">
            	<view class="label">联系电话：</view>
            	<view class="w_flex1">{{detail_info.mobile}}</view>
            </view>
            <view class="flex1 list">
            	<view class="label">实付金额：</view>
            	<view class="w_flex1">{{detail_info.pocket_price}}元</view>
            </view>
            <view class="flex1 list" v-if="detail_info.status == 4">
            	<view class="label">违约金额：</view>
            	<view class="w_flex1">{{detail_info.break_contract_price}}</view>
            </view>
            <view class="flex1 list">
            	<view class="label">优惠金额：</view>
            	<view class="w_flex1">{{detail_info.discounts_price}}元</view>
            </view>
            <view class="flex1 list">
            	<view class="label">下单时间：</view>
            	<view class="w_flex1">{{detail_info.createtime_text}}</view>
            </view>
            <view class="flex1 list" v-if="detail_info.status == 4">
            	<view class="label">取消时间：</view>
            	<view class="w_flex1">{{detail_info.cancel_time}}</view>
            </view>
          </view>
          <view class="more" :class="{on : orderMore}" @click="orderMores()"></view>
          
				</view>
        
			</view>
      <!-- 退改 -->
      <view class="wrapper" v-if="detail_info.status == 1">
      	<view class="van-ellipsis bg_fa font_35 text_bold list_top">退改</view>
      	<view class="bg_fff content font_31">
          <navigator :url="'/pages/index/order?id='+detail_info.store.id+'&tuik=1'+'&order='+detail_info.id" class="zb-tg-dd">修改订单</navigator>
          <navigator :url="'/pages/user/tuik?id='+detail_info.id" class="zb-tg-dd">取消订单</navigator>
      		<!-- <view class="zb-tg-dd" @click="tuiShowP(1)">取消订单</view> -->
          <view class="zb-tg-dd" @click="tuiShowP(3)">商家责任，取消订单</view>
      	</view>
      </view>
      
      <view class="foot_wrapper bg_fff van-hairline--top flex9">
      	<view class="zb-btn" v-if="detail_info.status == 0">支付</view>
      	<view class="zb-btn" v-if="detail_info.status == 1 || detail_info.status == 2" @click="get_phones">联系商家</view>
        <view class="zb-btn zb-btn1" @click="tuiShowP(2)" v-if="detail_info.status == 1">拍照寄存</view>
        <navigator :url="'/pages/user/again?id='+detail_info.id+'&store='+detail_info.store.id" class="zb-btn" v-if="detail_info.status == 1 || detail_info.status == 2">续存</navigator>
      	<navigator :url="'./evaluate?id=' + id" hover-class="none" class="zb-btn" v-if="detail_info.status == 3 && !detail_info.avaluate">评价</navigator>
      </view>
		</view>
    
    <view class="pup" v-show="tuiShow">
      <view class="boxs">
        <view class="tit" v-if="pup_type != 4">{{pup_tit}}<view class="close" @click="tuiShow = false"> <image src="../../static/image/user/close.png" class="ico" mode=""></image> </view></view>
        <view class="call" v-if="pup_type === 4">
          <view class="dds" @click="get_phone(detail_info.store.telephone)">{{detail_info.store.telephone}}</view>
          <view class="dds" style="border-bottom: none;" @click="get_phone(detail_info.store.mobile)">{{detail_info.store.mobile}}</view>
          <view class="dds on" @click="tuiShow = false">取消</view>
        </view>
        <scroll-view scroll-y="true" class="photo" v-if="pup_type === 2">
          <view class="paiz">
            <v-upload @getImages="getqjList"></v-upload>
          </view>
          <view class="p1">请按下方示例正确拍摄照片</view>
          <image src="../../static/image/user/1.png" class="img1" mode=""></image>
          <view class="txts flex-bect">
            <view class="p2">1、请将无包游“行李牌”系在您的行李上</view>
            <view class="p2">2、拍摄行李照片并上传(行李牌编号，请拍摄清晰)</view>
          </view>
          <view class="p3">*行李照片是您取回行李的唯一凭证，请务必拍照上传!</view>
        </scroll-view>
        
        <scroll-view scroll-y="true" class="shangjia" v-if="pup_type === 3">
          <view v-for="item in shangjiatui" :key="item.id" :class="{on: shangForm.type_id === item.id}" class="s-box">
            <view class="tops a11" @click="shangForm.type_id = item.id; shangForm.child_type_id = 0"  v-if="shangForm.type_id !== item.id">
              <view class="t-name">{{item.name}}</view>
              <view class="p1" v-if="item.id === 0">{{detail_info.store.business_hours}} 期间未开门，申请全额退款</view>
              <view class="p1" v-if="item.id === 1">寄存点出现以下任一问题，申请全额退款</view>
            </view>
            <view class="tops" v-else>
              <view class="t-name">{{item.name}}</view>
              <view class="p1" v-if="item.id === 0">{{detail_info.store.business_hours}} 期间未开门，申请全额退款</view>
              <view class="p1" v-if="item.id === 1">
                寄存点出现以下任一问题，申请全额退款
                <view class="red color_ff6a00">虚假填写理由商家会拒绝退款，可返回上页直接取消订单。</view>
              </view>
            </view>
            <view v-for="(items,index) in item.child" :key="index" v-if="shangForm.type_id === item.id" class="radio-box">
              <view class="name" @click="shangForm.child_type_id = index" :class="{on:shangForm.child_type_id == index && shangForm.type_id === item.id}">{{items}}</view>
              <template v-if="index === 0 && shangForm.type_id === 0">
                <v-upload @getImages="getShangImage"></v-upload>
                <view class="p3">"上传照片，或填写到店时间</view>
                <input type="text" placeholder="请填写到店时间，如: 8点30分" v-model="shangForm.times" class="clallTime">
              </template>
            </view>
          </view>
        </scroll-view>
        
        
        <v-tuik :price="tuiData" v-show="pup_type === 1 && tuiData" @getReson="getReson"></v-tuik>
        <view class="btn" @click="refund()" v-if="pup_type != 4">确定</view>
      </view>
    </view>
    
	</view>
</template>

<script>
	// 0-待支付 3-完成 4-取消 注待支付不生成订单
	// 联系商家 打电话
	// 待支付-去支付 取消订单 待存放-联系商家 取消订单 待取件-联系商家 已完成-评价 已取消-没有
  import tuik from '@/components/tuik.vue';
  import upload from '@/components/upload.vue';
  export default {
    components: {
      'v-tuik':tuik,
      'v-upload':upload
    },
		data() {
			return {
				id: '',
				isShow_img:true,
				is_load: false,
				detail_info: {},
				now_time: new Date().getTime(),
        tuiShow:false,
        refund_reason:'',
        pup_tit:'',
        pup_type:null, // 1-退款，2-拍照寄存
        pup_btn:'',
        tip:true,
        qujian:false,
        qjConfirmShow:true,
        qjList:[],
        tuiData:null,
        
        shangjiatui:[],
        clallTime:'',
        shangForm:{
          orders_id:'', //订单id
          type_id:'', //退款类型
          child_type_id:0, //退款类型子集
          times:'',
          image:[],
        },
        orderMore:false
			}
		},
		onLoad(e) {
			this.id = e.id;
      this.shangForm.orders_id = this.id;
      if(e.type){
        this.pup_type = Number(e.type)
        this.tuiShowP(this.pup_type)
      }
		},
		onShow() {
			getApp().get_loading();
			setTimeout(()=>{
        this.getOrdersDetail();
        this.$http.get(this.$api.storeRefundDescApi,{}).then(res=>{
          console.log('resd=',res.data[0].child[0])
          this.shangjiatui = res.data;
          
        })
      },500)
		},
		methods: {
      get_phones(){
        if(this.detail_info.store.telephone){
          this.tuiShowP(4)
        }else{
          this.get_phone(this.detail_info.store.mobile)
        }
        
      },
      orderMores(){
        this.orderMore = !this.orderMore
      },
      previewImg(){
        console.log('放大',this.detail_info.store.image_text)
        uni.previewImage({
          urls: this.detail_info.store.image_text,
          longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
              console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
            },
            fail: function(err) {
              console.log(err.errMsg);
            }
          }
        });
        
      },
      copy(e){
        uni.setClipboardData({
        	data: e,
        	success: function () {
        		console.log('success');
        	}
        });
      },
      getReson(e){
        this.refund_reason = e;
      },
      // 1-取消订单,2-拍照寄存,3-商家责任，全额取消
      tuiShowP(e){
        this.tuiShow = true;
        this.pup_type = e;
        if(e === 1){
          this.pup_tit = "取消订单";
          this.pup_btn = "确定";
        }else if(e === 2){
          this.pup_tit = "拍照寄存";
          this.pup_btn = "确认寄存";
        }else if(e === 3){
          this.pup_tit = "商家责任，取消订单";
          this.pup_btn = "确认取消";
        }
      },
      //1-取消订单， 2-拍照寄存
			refund(){
        if(this.pup_type === 1){
          if(this.refund_reason === '') return getApp().get_msg('请选择退款原因');
          uni.showModal({
            title:"提示",
            content:"确定要取消该订单吗？",
            success: (e) => {
              if(e.confirm){
                uni.showLoading()
                this.get_refund()
              }
            }
          })
        }else if(this.pup_type === 2){
          if(this.qjList.length === 0) return getApp().get_msg('请上传图片');
          const images = this.qjList.map(m => {return m.url});
          console.log('images=========================>',images);
          // return
          this.$http.post(this.$api.takePhotosUploadApi,{orders_id:this.detail_info.id, images:images.join(',')}).then(res=>{
            uni.showToast({
              title:"拍照寄存成功",
              icon:'none'
            })
            this.detail_info.status = 2;
            this.tuiShow = false;
            
            uni.setStorageSync('upOrder',1)
          })
          
        }else if(this.pup_type === 3){
          const data = JSON.parse(JSON.stringify(this.shangForm));
          if(data.type_id === '') return getApp().get_msg('请选择取消原因类型')
          if(data.type_id === 0 && data.child_type_id === 0 && data.image === '' && data.times === '') return getApp().get_msg('请上传图片或填写到店时间');
          if(data.type_id === 1 || data.type_id === 0 && data.child_type_id === 1){
            data.image='';
            data.times = '';
            this.shangForm.image = [];
            this.shangForm.times = ''
          }
          console.log('data1111111111s',this.shangForm.image)
          if(this.shangForm.image.length > 0){
            let image = [];
            this.shangForm.image.forEach(m=>{
              if(!image.find(n=> n === m.url)){
                image = image.concat(m.url) 
              }
            })
            console.log('data.imagedata.imagedata.image',image)
            data.image = image.join(',')
          }
          console.log('shangForm=======>data',data);
          this.$http.post(this.$api.storeRefundApi, data).then(res=>{
            uni.showToast({
              title:"提交申请成功~",
              icon:'none'
            })
            this.tuiShow = false;
            this.detail_info.status = 7;
            uni.setStorageSync('upOrder',1)
          })
        }
        
				// let self = this;
				// uni.showModal({
				// 	title: '提示',
				// 	content: '确定取消该订单吗？',
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			getApp().get_loading();
				// 			self.get_refund();
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// });
			},
      qjconfirm(){
        if(this.detail_info.is_tip){
          uni.showModal({
            title:"提示",
            content:this.detail_info.tip,
            success: (e) => {
              if(e.confirm){
                this.$http.post(this.$api.completeOrdersByUserApi,{orders_id:this.detail_info.id}).then(res=>{
                  console.log('取件成功')
                  this.qjConfirmShow = false;
                  this.tip = false;
                })
                
              }
            }
          })
        }else{
          uni.showModal({
            title:"提示",
            content:"已到达寄存点，并确定取回行李？",
            success: (e) => {
              if(e.confirm){
                this.$http.post(this.$api.completeOrdersByUserApi,{orders_id:this.detail_info.id}).then(res=>{
                  console.log('取件成功')
                  this.qjConfirmShow = false;
                  this.tip = false;
                })
                
              }
            }
          })
        }
        
      },
      // 获取上传的图片信息
      getqjList(e){
        this.qjList = e;
      },
      //商家退款图片
      getShangImage(e){
        this.shangForm.image = this.shangForm.image.concat(e);
      },
			get_refund() {
        console.log('this.refund_reason===>',this.refund_reason)
				this.$http.get(this.$api.refundApi, {
					order_id: this.id,
          refund_reason:this.refund_reason
				}).then(res => {
          uni.hideLoading()
					getApp().get_msg('退款成功，金额稍后，请耐心等待');
					getApp().get_back();
          this.tuiShow = false;
					// uni.setStorageSync('orderList', true);
				}).catch(()=>{
          uni.hideLoading()
        })
			},
			
			getOrdersDetail() {
				let that = this;
				this.$http.get(this.$api.getMyOrdersDetail, {
					order_id: this.id,
					'scene':true,
				}).then(res => {
					this.is_load = true;
          // res.data.status = 2
          if(res.data.status === 2){
            this.qjList = res.data.images_text.map((e, i)=>{
              return {url:e, id:i+1}
            })
          }
          if(res.data.status === 1){
            // this.$http.post(this.$api.refundDescApi,{order_id: this.id}).then(tui=>{
            //   console.log('tui===》',tui);
            //   this.tuiData = tui.data;
            //   if(this.pup_type){
            //     setTimeout(()=>{
            //       this.tuiShowP(this.pup_type)
            //     },100)
            //   }
            // })
          }else{
            
            if(this.pup_type){
              setTimeout(()=>{
                this.tuiShowP(this.pup_type)
              },100)
            }
          }
					if (res.data.mobile) {
						res.data.mobile = res.data.mobile.substring(0, 3) + '****' + res.data.mobile.substring(7);
					}
						
					this.detail_info = res.data;
          // this.detail_info.store.telephone = '18255199662'
					if(res.data.status == 3){  // 订单完成 三天后 商家的电话地址不可见
						var new_time = res.time;
						if(new_time - res.data.createtime >= 259200){
							this.detail_info.store.mobile = '********';
							this.detail_info.store.address = '********';
						}
					}else{
						if (!that.detail_info.is_nav_mobile){
							this.detail_info.store.mobile = '********';
							this.detail_info.store.address = '********';
						}
					}
					
					
				})
			},
			// 地图导航
			get_map() {
				let self = this;
				// if (self.detail_info.status == 3) {
				// 	// 订单已完成
				// 	uni.openLocation({ //​ 使用微信内置地图查看位置。
				// 		latitude: Number(self.detail_info.store.lat), //要去的纬度-地址
				// 		longitude: Number(self.detail_info.store.lng), //要去的经度-地址
				// 		name: self.detail_info.store.store_name,
				// 		address: ''
				// 	})
				// 	return
				// }

				if (!this.detail_info.is_nav_mobile) return getApp().get_msg('导航仅在订单寄存当天可以查看');

				uni.openLocation({ //​ 使用微信内置地图查看位置。
					latitude: Number(self.detail_info.store.lat), //要去的纬度-地址
					longitude: Number(self.detail_info.store.lng), //要去的经度-地址
					name: self.detail_info.store.store_name,
					address: ''
				})
			},
			// 拨号
			get_phone(e) {
        
				// if (this.detail_info.status == 3) {
				// 	// 订单已完成
				// 	uni.makePhoneCall({
				// 		phoneNumber: e
				// 	});
				// 	return
				// }

				if (!this.detail_info.is_nav_mobile) return getApp().get_msg('电话仅在订单寄存当天可以查看');

				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			get_now_time() {
				let a_ = this.detail_info.start_time;
				let b_ = this.detail_info.end_time;
				// 开始时间戳
				let a_time = new Date(a_.replace('年','/').replace('月','/').replace('日','')).getTime();
				// 结束时间戳 转换成晚上23：59：59
				let b_time = new Date(b_.replace('年','/').replace('月','/').replace('日','')).getTime();
				b_time = b_time + 86400000*1.5;
				// 现在时间戳
				this.now_time = new Date().getTime();
				console.log(this.now_time)
				if (this.now_time <= b_time && this.now_time >= a_time) {
					return true;
				} else {
					return false;
				}
			}
		}
	}
</script>

<style lang="less">
  .call{
    .dds{padding: 28rpx 0; text-align: center; border-bottom: 1px solid #ededed; margin: 0 -40rpx;}
    .dds.on{border-bottom: none; border-top: 20rpx solid #f5f5f5;}
  }
  .mabt{margin: 35rpx 0 27rpx 0;}
  .more{
    width: 40rpx; height:40rpx; margin: 0 auto; display: flex; align-items: center;justify-content: center; margin-bottom: 20rpx;
    &::after{content: ''; display: block; border: 14rpx solid transparent; border-top-color:#ddd; border-bottom:none; width: 0px; border-top-width: 20rpx;}
    &.on::after{border-bottom-color:#ddd; border-top:none; border-bottom-width: 20rpx; border-bottom-style: solid;}
  }
  @keyframes run{
    0%{transform: translate(-50%, 0);}
    50%{transform: translate(-50%, 10px);}
    100%{transform: translate(-50%, 0);}
  }
  .zb-tg-dd{
    position: relative; padding: 20rpx 0; border-bottom: 1px solid #ededed;
    &:last-child{border-bottom: none;}
    &::after,&::before{content: ''; display: block; border: 10rpx solid transparent; border-right: none; position: absolute; right: 20rpx; top: 50%; transform: translateY(-50%);}
    &::before{border-left-color: #ccc;}
    &::after{border-left-color: #fff; margin-right: 2px;}
  }
  .pup{
    position: fixed; width: 100%; height: 100%; z-index: 999; background-color: rgba(0,0,0,0.3); left:0; top: 0;
    view{box-sizing: border-box;}
    .boxs{width: 100%; padding: 0 3% 40rpx; position: absolute; left: 0; bottom: 0; z-index: 1; background-color: #fff; border-radius: 10rpx 10rpx 0 0;}
    .tit{font-size: 32rpx;  border-bottom: 1px solid #ededed; margin-bottom: 20rpx; font-weight: bold; display: flex; align-items: center; justify-content: space-between;}
    .close{width: 80rpx; height: 80rpx; display: flex; align-items: center; justify-content: center;}
    .ico{width: 40rpx; height: 40rpx;}
    .btn{background-color: #FF6A00; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 6rpx; margin-top: 20rpx; height: 70rpx; font-size: 28rpx; margin-top: 40rpx;}
    .paiz{border: 2px dotted #ededed; padding: 16rpx; padding-bottom: 0;}
    .photo{
      max-height: 60vh;
      .p1{font-weight: bold; font-size: 30rpx; margin: 40rpx 0 20rpx;}
      .img1{width: 100%; height: 260rpx;}
      .p2{color: #666; width: 48%; margin-top: 16rpx; font-size: 26rpx;}
      .p3{color: red; font-size: 26rpx; margin-top: 20rpx;}
    }
    .shangjia{
      max-height: 60vh;
      view{font-size: 26rpx;}
      .t-name{margin-bottom:10rpx;  font-size: 28rpx; font-weight: bold;}
      .p1{color: #666; margin-bottom: 10rpx;}
      .p3{color: red; margin-top: 20rpx;}
      .clallTime{width: 100%; height: 80rpx; background-color: #f5f5f5; border-radius: 4px; padding: 0 10rpx; margin-top: 16rpx; box-sizing: border-box;}
      .name{
        display: flex; align-items: center; margin-bottom: 10rpx; padding: 10rpx 0;
        &::before{content: ''; display: block; width: 30rpx; height: 30rpx; border-radius: 50%; border: 2px solid #ddd; box-sizing: border-box; margin-right: 8rpx;}
        &.on::before{border-color: #ff5656; border-width: 8rpx}
      }
      .radio-box{padding: 0 20rpx;}
      .s-box{
        .tops{ padding: 20rpx 20rpx;}
        background-color: #f9f9f9; border-radius: 10rpx; border: 1px solid #ddd; margin-bottom: 20rpx;
        &.on{border-color: #FF6A00; background-color: rgba(255,0,0, 0.02);}
      }
    }
  }
  
  .quj-boxs{
    position: relative;
    .tip{
      position: absolute; width: 300rpx; background-color: rgba(0,0,0,0.8); border-radius: 8rpx; color: #fff; font-size: 24rpx; left: 50%; bottom: 100%; transform: translateX(-50%); padding: 20rpx; padding-right: 60rpx; animation: run 0.8s infinite; margin-bottom: -40rpx; z-index: 40; line-height: 1.6;
      &::after{content: ''; display: block; border: 16rpx solid transparent; border-bottom: none; border-top-color:rgba(0,0,0,0.8); position: absolute; left: 50%; top: 100%; transform: translateX(-50%);}
    }
    .close{
      width: 40rpx; height: 40rpx; display: flex; align-items: center; justify-content: center; position: absolute; right: 20rpx; top: 50%; transform: translateY(-50%);
      &::after,&::before{content: ''; display: block; width: 2px; height: 20rpx; background-color: #fff; position: absolute;}
      &::before{transform: rotate(45deg);}
      &::after{transform: rotate(-45deg);}
    }
  }
  .quj-box{
    min-height: 160rpx; position: relative; border-radius: 16rpx; overflow: hidden;
    .top{position: absolute; width: 100%; left: 0; top: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.8); height: 100%;}
    .btn{border-radius: 6rpx; padding: 8rpx 30rpx; background-color: #FF6A00; color: #fff;}
    
    .ico{width: 40rpx; height: 40rpx; display: none;}
  }
	.box {
		box-sizing: border-box;
		padding: 0 0 134rpx 0;
	}

	.title {
		margin: 23rpx 58rpx 35rpx;
	}

	.wrapper {
		width: 704rpx;
		overflow: hidden;
		margin: 23rpx auto;
		position: relative;
		border-radius: 16rpx;

		&.active {
			.w_flex1 {
        color: #333;
				// text-align: right;
			}
		}

		.list_circle_left,
		.list_circle_right {
			width: 31rpx;
			height: 31rpx;
			top: 98rpx;
			position: absolute;
			border-radius: 50%;
			background-color: #F2F2F2; display: none;
		}

		.list_circle_left {
			left: -15rpx;
		}

		.list_circle_right {
			right: -15rpx;
		}

		.content {
			padding: 10rpx 23rpx;
			line-height: 44rpx;
		}

		.list {
			margin: 10rpx 0;
		}
	}

	.list_top {
		padding: 16rpx 23rpx;
	}

	.label {
		margin-right: 15rpx;
	}

	.wrapper_right {
		height: 33rpx;
		margin-left: 21rpx;
		padding: 4rpx 16rpx; font-size: 26rpx;
		border-radius: 23rpx;
		border: 2rpx solid #FF6A00; color: #FF6A00; display: flex; align-items: center; justify-content: center; font-size: 26rpx;
	}

	.foot_wrapper {
		bottom: 0;
		left: 0;
		right: 0;
		padding: 23rpx 7rpx 50rpx;
		position: fixed;
		box-sizing: border-box;
    .zb-btn{border: 1px solid #FF6A00; border-radius: 40rpx; display: flex; align-items: center; justify-content: center; height: 66rpx; color: #FF6A00; font-size: 26rpx; width: auto; padding: 0 20rpx; min-width: 120rpx; margin-right: 20rpx;}
    .zb-btn1{background-color: #FF6A00; color: #fff; font-weight: bold;}

		view,
		navigator {
			width: 169rpx;
			height: 62rpx;
			margin-right: 35rpx;
			border-radius: 55rpx;
			border: 1px solid #fff;
			box-sizing: border-box;

			&.border_7b {
				border-color: #7B7B7B;
			}

			&.border_ff6a00 {
				color: #FF6A00;
				border-color: #FF6A00;
			}
		}
	}
</style>
